<style lang="scss" src="./index.scss" scoped></style>
<template>
    <div class="product-list-box">
        <ul class="product-list-ul">
            <!-- <li class="product-item-box product-list__edit">
                <div class="product-item__body" @click="handleItemClick({}, 'add')">
                    <div class="product-item__placeholder-box"></div>
                    <ask-empty-text icon="el-icon-plus">
                        创建
                    </ask-empty-text>
                </div>
            </li> -->
            <ask-empty-text style="min-height: 400px;" v-if="list.length === 0"></ask-empty-text>
            <template v-for="item in list">
                <product-item
                    :item="item"
                    :key="item.id"
                    @item-click="handleItemClick(item, 'edit')"
                    @item-remove="handleItemClick(item, 'remove')"
                ></product-item>
            </template>
        </ul>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import ProductItem from "./item.vue";

@Component({
    components: {
        ProductItem
    }
})
export default class ProductList extends Vue {
    @Prop({
        type: Array,
        default: () => {
            return [];
        }
    })
    readonly list!: any[];

    handleItemClick(item: any, type: string) {
        this.$emit('item-click', item, type);
    }
}
</script>
